<template>
  <!--  <BoxFlexibleHeight bgColor="#fff">-->
  <div class="app-container documentation-container">
    <EntryInfo
    v-if="isShow"
      v-loading="loading"
      :data="data"
      :user-interview-info="userInterviewInfo"
      :experience-info="experienceInfo"
      @change="getInterviews()"
    />
  </div>
<!--  </BoxFlexibleHeight>-->
</template>

<script>
import { getInterview } from '@/api/v2/entry'
import EntryInfo from '@/components/Entry/Info'
import BoxFlexibleHeight from '@/components/BoxFlexibleHeight/index'
import { handleFiledData } from '@/utils/handleData'
export default {
  name: 'Documentation',
  components: { EntryInfo, BoxFlexibleHeight },
  data() {
    return {
      data: {},
      userInterviewInfo: null,
      experienceInfo: null,
      loading: false,
      isShow:false
    }
  },
  created() {
    this.getInterviews()
  },
  methods: {
    async getInterviews() {
      this.loading = true
      try {
        const res = await getInterview(this.$route.params.id)
        console.log(res,'res');
        this.data = res.data
        const { handleArr, experienceArr } = handleFiledData(res.data.trend, 'value', 'valueable')
        this.userInterviewInfo = handleArr
        this.experienceInfo = experienceArr
        this.isShow=true
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}
</style>

